[WIP] Evaluate which controls should be placed in plugins#35
[WIP] Evaluate which controls should be placed in plugins#35huangyiirene merged 8 commits intomainfrom
Conversation
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
… plugin-charts Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR successfully extracts three heavy component types (Markdown, Kanban, Charts) from the @object-ui/components core package into separate lazy-loaded plugin packages, reducing the main bundle size by approximately 50% (~900 KB - 1 MB).
Changes:
- Created
@object-ui/plugin-markdownpackage with lazy-loaded GitHub Flavored Markdown rendering (262 KB gzipped) - Created
@object-ui/plugin-kanbanpackage with lazy-loaded drag-and-drop kanban board (79 KB gzipped) - Enhanced
@object-ui/plugin-chartswith advanced chart rendering capabilities (538 KB gzipped) - Removed heavy dependencies (react-markdown, recharts, @dnd-kit) from the core components package
- Updated playground with new plugin imports and comprehensive demo examples
Reviewed changes
Copilot reviewed 30 out of 31 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/plugin-markdown/package.json | New markdown plugin package configuration with react-markdown dependencies |
| packages/plugin-markdown/src/index.tsx | Markdown renderer with lazy loading and auto-registration |
| packages/plugin-markdown/src/types.ts | TypeScript definitions for markdown schema |
| packages/plugin-kanban/package.json | New kanban plugin package configuration with @dnd-kit dependencies |
| packages/plugin-kanban/src/types.ts | TypeScript definitions for kanban board schema |
| packages/plugin-charts/src/index.tsx | Enhanced chart renderer with multiple chart type support |
| packages/plugin-charts/src/AdvancedChartImpl.tsx | New advanced chart implementation with bar/line/area support |
| packages/components/src/ui/markdown.tsx | Refactored markdown component to remove external dependency |
| packages/components/src/ui/kanban.tsx | Refactored kanban component to remove external dependency |
| packages/components/src/ui/chart.tsx | Removed external cn utility dependency |
| packages/components/package.json | Removed heavy dependencies moved to plugins |
| packages/components/src/ui/index.ts | Removed exports for extracted components |
| packages/components/src/renderers/data-display/index.ts | Removed imports for extracted renderers |
| apps/playground/src/App.tsx | Added imports for new markdown and kanban plugins |
| apps/playground/package.json | Added new plugin dependencies |
| apps/playground/src/data/examples/plugins.ts | Added new demo examples for markdown and kanban |
| PLUGIN_EXTRACTION_SUMMARY.md | Comprehensive documentation of extraction work |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
|
@copilot fix pnpm test |
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
@copilot 继续 |
|
@copilot fix 2026-01-14T16:54:29.2806379Z packages/components pretest$ pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build |
Deleted the test case for registering the markdown component from the new components registration test suite.
|
✅ All checks passed!
|
- #39 showRecordCount: conditionally show/hide record count bar - #24 rowHeight: add short and extra_tall mapping in ListView + bridge - #7 sort: parse legacy string format "field desc" - #22 description: render view description below toolbar - #40 allowPrinting: add print button with window.print() - #31 virtualScroll: forward flag to grid view schema - #35 userActions: wire sort/search/filter/rowHeight to toolbar visibility - #38 addRecord: render "+ Add Record" button from spec config - #37 tabs: render tab bar UI for view tabs - #9 filterableFields: restrict FilterBuilder to whitelist fields - #8 searchableFields: scope search queries to specified fields - #36 appearance: wire showDescription and allowedVisualizations - #16 pageSizeOptions: add page size selector UI in status bar - #17-21: use spec kanban/calendar/gantt/gallery/timeline configs - #20 gallery: add typed GalleryConfig to ListViewSchema - #21 timeline: add typed TimelineConfig to ListViewSchema - Bridge: add short/extra_tall density mapping, filterableFields pass-through Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Plan: Extract Heavy Components to Plugins ✅ COMPLETED
Based on the plugin architecture analysis, the following components have been successfully extracted from
@object-ui/componentsinto separate plugin packages to reduce bundle size and improve lazy-loading:Components to Extract:
Analyze current dependencies and component usage
Create plugin-markdown package
Create plugin-kanban package
Consolidate chart components
Update @object-ui/components
Update examples and documentation
Testing and validation
Summary
✅ Successfully extracted 3 heavy components into lazy-loaded plugins
✅ Reduced @object-ui/components bundle size by ~50%
✅ Maintained zero-configuration developer experience
✅ All builds passing, ready for testing
See
PLUGIN_EXTRACTION_SUMMARY.mdfor complete details.Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.